<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/ajax.js"></script>
		<script src="../js/student/delay-student.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		
		<style>
			body{
				padding: 20px;
				background-color: white;
				
			}
			
		</style>
	</head>
	<body>

		
		<div class="container">
			
			<!-- 路径导航开始-->
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb">
					  <li><a style="text-decoration: none;" href="#">学生模块</a></li>
					  <li><a style="text-decoration: none;" href="#">查看迟到信息</a></li>
					</ol>
				</div>
			</div>
			<!-- 路径导航结束-->
			
		
			
			<!-- 表格开始-->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="delayListTable">
						<tr >
							
							<th colspan="2">学生姓名</th>
							
							<th >迟到日期</th>
							
						</tr>
						<tr v-for="delay,index in delays">
							
							<td colspan="2">{{delay.userName}}</td>
							<td>{{delay.delayDate}}</td>
							
						</tr>
						
						<!--分页组件开始-->
						<tr style="background-color: white;">
							<td colspan="2">
								<span class="glyphicon glyphicon-flag"></span>
								第
								<span class="pageNumber">{{pageNumber}}</span>
								页 
								&nbsp;
								<span class="glyphicon glyphicon-align-justify"></span>
								每页
								<span class="totalPage">{{pageSize}}</span>
								条
								&nbsp; 
								<span class="glyphicon glyphicon-check"></span>
								总记录
								<span class="totalCounter">{{totalCounter}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-briefcase"></span>
								共
								<span class="totalPage">{{totalPage}}</span>
								页
							</td>
							<td colspan="4">
								<!-- 分页按钮开始 -->
								<nav aria-label="Page navigation">
								  <ul class="pagination">
									
									<!-- 第1页 -->
									<li id="firstPage"><a href="#">首页</a></li>  
									
									<!-- 上1页 -->
								    <li id="prePage"><a href="#">&lt;</a></li>
									
									<!-- 下1页 -->
								    <li id="nextPage"><a href="#">&gt;</a></li>
									
									<!-- 最后1页 -->
									<li id="lastPage"><a href="#">末页</a></li> 
								  </ul>
								</nav>
								<!-- 分页按钮开始 -->
							</td>
						</tr>
						<!--分页组件结束-->
						
					</table>
				</div>
			</div>
			<!-- 表格结束-->
		</div>
<!-- 登陆失败提示框 开始 -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 600px;height: 251px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="errorModalLabel">
					<span class="glyphicon glyphicon-remove"></span>
                    输入错误
                </h4>
            </div>
            <div class="modal-body">
                <!-- 表单开始 -->
                <form class="form-horizontal">
                    <div class="form-group">
						<p>&nbsp;</p>
						<p style="text-align: center;" class="form-control-static">
							<span class="glyphicon glyphicon-hand-right"></span> &nbsp;	
							请输入正确的数据
						</p>
                    </div>
                </form>
                <!-- 表单结束-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 登陆失败提示框 结束 -->
	</body>
</html>
